import { onMounted, ref } from "vue";

export default function useTodos(){
  // 所有todo存放的地方
  const todos = ref([]);
  // 添加todo函数
  const addTodo = (todo) => todos.value.push(todo);

  // 调用api初始化加载todos内容
  const fetchTodos = async () => {
    const res = await fetch("https://jsonplaceholder.typicode.com/todos?_limit=4")
    // raw 生的 未加工的
    const rawTodos = await res.json()
    todos.value = rawTodos.map((todo) => ({
      id: todo.id,
      content: todo.title,
      completed: todo.completed,
    }))
  }
  onMounted(() => {
    fetchTodos()
  })

  return {
    todos,
    addTodo
  }
}